/*
  学习目标：JSX初体验
  JSX是createElement的语法糖， 本质是一样的，只是写法更简单
*/

import React from 'react';
import ReactDOM from 'react-dom';

const liNode1 = React.createElement('li', null, '香蕉1');
const liNode2 = React.createElement('li', null, '香蕉2');
const liNode3 = React.createElement('li', null, '香蕉3');

const ulNode = React.createElement('ul', { className: 'list' }, liNode1, liNode2, liNode3);
// 保存了关键信息的JS对象

const ulNode2 = (
  <ul className="list">
    <li>香蕉1</li>
    <li>香蕉2</li>
    <li>香蕉3</li>
  </ul>
);
console.log('ulNode  ----->  ', ulNode);
console.log('ulNode2  ----->  ', ulNode2);

ReactDOM.render(ulNode2, document.getElementById('root'));
